import { QueryParams, Role } from '@/types'
import { usePagination } from '@/hooks'
import { reactive } from 'vue'
import { createRole, updateRole, getRoles } from '@/api/role'

const columns = [
  {
    title: '角色名',
    dataIndex: 'name',
    // sorter: true,
  },
  {
    title: '角色编码',
    dataIndex: 'code',
  },
  {
    title: '操作',
    align: 'center',
    width: 160,
    slots: { customRender: 'operation' },
  },
]
interface SearchForm {
  code?: string
  name?: string
}

export const useRole = (searchForm: SearchForm) => {
  const { data, loading, request, pagination } = usePagination(getRoles)

  const handleTableChange = (page: any, filters: any, sorter: any) => {
    const params: QueryParams = {
      page: page.current,
      pageSize: page.pageSize,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...searchForm,
    }
    request(params)
  }

  const search = () => {
    const params: QueryParams = {
      page: 1,
      pageSize: 10,
      ...searchForm,
    }
    request(params)
  }

  return {
    columns,
    data,
    loading,
    request,
    pagination,
    handleTableChange,
    search,
  }
}
